<template>
  <div id="ontology">
    <div
      id="ontologyInner"
      :style="{maxWidth:maxWidth+'px',backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}"
      :class="[!build?'build':'']"
    >
      <header>
        <div class="brand"></div>
        <div class="banner">
          <div class="poster">
            <img :src="filePath+'theme_'+themeIndex+'/banner.jpg'">
            <i
              :style="{background:'linear-gradient(to top, rgba('+themes[themeIndex].colors.main+', 1), rgba('+themes[themeIndex].colors.main+', 0))'}"
            ></i>
          </div>
          <div class="angle">
            <div class="during" @click="dateSwitch">
              <!-- <input type="date" id="datePicker"> -->
              <span
                :style="{color:'rgb('+themes[themeIndex].colors.bold+')'}"
              >榜单周期：{{calendar.begin[0]}}年{{calendar.begin[1]}}月{{calendar.begin[2]}}日-{{calendar.end[1]}}月{{calendar.end[2]}}日</span>
            </div>
            <svg>
              <defs>
                <g id="shape">
                  <path
                    d="M900,100c0,0-178.1-30.2-450-30.2S0,100,0,100V0h900V100z"
                    :fill="'rgb('+themes[themeIndex].colors.main+')'"
                  ></path>
                </g>
              </defs>
              <use xlink:href="#shape" x="0" y="0"></use>
            </svg>
            <svg class="shadow">
              <defs>
                <g id="shape2">
                  <path
                    d="M900,100c0,0-178.1-30.2-450-30.2S0,100,0,100V0h900V100z"
                    :fill="'rgb('+themes[themeIndex].colors.heavy+')'"
                  ></path>
                </g>
              </defs>
              <use xlink:href="#shape2" x="0" y="0"></use>
            </svg>
          </div>
        </div>
      </header>
      <main :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}">
        <mainContainer/>
      </main>
      <footer
        :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')',borderBottomColor:'rgb('+themes[themeIndex].colors.bold+')',backgroundImage:'url('+filePath+'theme_'+themeIndex+'/footer.jpg)'}"
      >
        <div class="angle">
          <svg>
            <defs>
              <g id="shape3">
                <path
                  d="M0,0c0,0,178.1,56.9,450,56.9S900,0,900,0v120H0V0z"
                  :fill="'rgb('+themes[themeIndex].colors.main+')'"
                ></path>
              </g>
            </defs>
            <use xlink:href="#shape3" x="0" y="0"></use>
          </svg>
          <svg class="shadow">
            <defs>
              <g id="shape4">
                <path
                  d="M0,0c0,0,178.1,56.9,450,56.9S900,0,900,0v120H0V0z"
                  :fill="'rgb('+themes[themeIndex].colors.heavy+')'"
                ></path>
              </g>
            </defs>
            <use xlink:href="#shape4" x="0" y="0"></use>
          </svg>
        </div>
        <div
          class="colum-tit"
          :style="{backgroundColor:'rgb('+themes[themeIndex].colors.bold+')',color:'rgb('+themes[themeIndex].colors.light+')'}"
        >
          <span>奖券越多 中奖机率越高</span>
          <i></i>
          <i></i>
        </div>
        <div class="note">
          <!-- <img src="../assets/images/footer.jpg"> -->
          <div class="note-tit" :style="{color:'rgb('+themes[themeIndex].colors.bold+')'}">
            <span>活动说明</span>
          </div>
          <div class="note-items" :style="{color:'rgb('+themes[themeIndex].colors.heavy+')'}">
            <li v-for="(item, index) in notes" :key="index">
              <i :style="{backgroundColor:'rgb('+themes[themeIndex].colors.bold+')'}"></i>
              {{item}}
            </li>
          </div>
        </div>
      </footer>
      <subInfo v-if="!build"/>
    </div>
  </div>
</template>

<script>
import subInfo from "../components/subInfo.vue";
import mainContainer from "../components/mainContainer.vue";
import store from "../store.js";
export default {
  components: {
    subInfo,
    mainContainer
  },
  data () {
    return {
      subInfoSwitch: false,
      maxWidth: 900,
      during: {
        year: 0,
        month: 0,
        days: 0
      },
      notes: [
        "每个抽奖池抽出一名幸运儿独得奖金。",
        "若2个奖池都抽到同一位幸运儿， 奖金¥10598，一人带回家！",
        "销售额以实际支付金额为准。",
        "囤货专区内的下单金额也计入销售额业绩。",
        "抽奖结果将于活动结束的次月月底发布， 请持续关注【旺仔旺铺服务号】获取信息。"
      ],
      calendarSwitch: false
    };
  },
  computed: {
    themes: {
      get () {
        return store.state.themes;
      },
      set () { }
    },
    themeIndex: {
      get () {
        return store.state.themeIndex;
      },
      set () { }
    },
    calendar: {
      get () {
        return store.state.calendar;
      },
      set () { }
    },
    build: {
      get () {
        return store.state.bui;
      },
      set () { }
    },
    filePath: {
      get () {
        return store.state.filePath
      },
      set () { }
    }
  },
  methods: {
    dateInit () {
      let date = new Date();
      let days = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      this.during.year = date.getFullYear();
      this.during.month = date.getMonth() + 1;
      this.during.days = days.getDate();
      store.commit("upload", {        prope: "calendar", data: {
          switch: false,
          begin: [this.during.year, this.during.month, 1],
          end: [this.during.year, this.during.month, this.during.days]
        }      })
    },
    dateSwitch () {
      store.commit("upload", { prope: "calendar.switch", data: true });
    }
  },
  mounted () {
    this.dateInit();
  }
};
</script>
<style lang='stylus' scoped>
@import '../assets/style/index.styl'
#ontology {
  #ontologyInner {
    position relative
    width 900px
    overflow-x hidden
    &.build {
      width unset
      margin auto
    }
    // margin 0 auto
    header {
      .brand {
        position absolute
        top 45px
        left 45px
        height 60px
        width 60px
        background-image url('../assets/images/public/brand.png')
        background-size contain
        background-position center
        z-index 99
      }
      .banner {
        position relative
        .angle {
          position relative
          z-index 99
          svg {
            position relative
            z-index 1
            top 0
            left 0
            width 100%
            height 100px
            z-index 1
            &.shadow {
              position absolute
              filter blur(6px)
              transform scaleY(0.95)
              transform-origin bottom center
              opacity 0.3
              z-index 0
              top 5px
            }
          }
          .during {
            cursor pointer
            position absolute
            z-index 3
            left 50%
            transform translateX(-50%)
            top -15px
            & span {
              background rgba(255, 255, 255, 0.8)
              padding 10px 15px
              border-radius 3px
              position relative
              &:before {
                content ''
                position absolute
                top 50%
                left 50%
                transform translate(-50%, -50%)
                display inline-block
                background transparent
                height 140%
                width 108%
                border-radius 0px
                border 2px solid #fff
                opacity 0.2
              }
            }
          }
        }
        .poster {
          position relative
          i {
            position absolute
            left 0
            bottom 0
            display inline-block
            height 60px
            width 100%
            background #000
            background linear-gradient(to top, rgba(86, 47, 254, 1), rgba(86, 47, 254, 0))
            bottom -2px
          }
          img {
            width 100%
          }
        }
      }
    }
    footer {
      border-bottom 25px solid #000
      background-size cover
      background-position top center
      background-repeat no-repeat
      padding-top 25px
      background-color footC
      position relative
      margin-top 100px
      &:before {
        content ''
        display inline-block
        top 0
        bottom 0
        left 0
        right 0
        position absolute
        background-image url('../assets/images/public/footer_snow.png')
        opacity 0.7
      }
      .angle {
        position absolute
        z-index 99
        top -100px
        left 0
        width 100%
        overflow hidden
        svg {
          position relative
          z-index 1
          top 0
          left 0
          width 100%
          height 120px
          z-index 1
          &.shadow {
            position absolute
            filter blur(6px)
            transform scaleY(0.85)
            transform-origin top center
            opacity 0.6
            z-index 0
            top 5px
          }
        }
      }
      .colum-tit {
        position relative
        top -20px
        z-index 99
        text-align center
        color fontCl
        width 50%
        margin 0 auto
        // background-color colorH
        padding 15px 0
        font-size 24px
        position relative
        border-radius 50px
        box-shadow -1px -1px 3px rgba(0, 0, 0, 0.2) inset
        & i {
          position absolute
          height 18px
          width 18px
          background rgba(255, 255, 255, 0.1)
          border-radius 50%
          left 8%
          top 50%
          transform translateY(-50%)
          &:before {
            content ''
            display inline-block
            height 50%
            width 50%
            background rgba(255, 255, 255, 0.8)
            position absolute
            border-radius 50%
            top 50%
            left 50%
            transform translate(-50%, -50%)
          }
          &:last-child {
            left unset
            right 8%
          }
        }
        span {
          position relative
          z-index 1
        }
      }
      .note {
        color fontC
        padding 80px 180px 180px 80px
        .note-tit {
          font-size 24px
          font-weight bold
          display inline-block
          padding 10px 15px
          // background-image url('../assets/images/note_tit.png')
          background-size contain
          background-repeat no-repeat
          background rgba(255, 255, 255, 0.2)
          border-radius 50px
          margin-bottom 15px
          span {
            // transform rotate(-10deg) scale(0.8) translate(45%, -15%)
            display inline-block
            background rgba(255, 255, 255, 0.8)
            padding 15px 25px
            border-radius 30px
          }
        }
        .note-items {
          li {
            margin 15px 0
            position relative
            font-size 22px
            opacity 0.8
            & i {
              content ''
              display inline-block
              position absolute
              left -20px
              top 10px
              height 10px
              width 10px
              border-radius 50%
              opacity 0.5
              // background-image url('../assets/images/list_style.png')
              background-size contain
              background-repeat no-repeat
              background-position center
            }
          }
        }
      }
    }
  }
}
</style>
